<template>
  <div id="app" class="skStudentTable">
    <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="studentId" bordered  :pagination="false"
      :scroll="{x: tebleXScroll ,y:800}">
      <span slot="checkInTime" slot-scope="text, record">
        <span :style="{ color: text ? '' : '#FF9933' }">
          {{ text || '--' }}
        </span>
      </span>
      <span slot="status" slot-scope="text, record">
        <span :style="{ color: text ? '#FF9933' : '' }">
          {{ text == '-' ? text : (text ? '迟到' : '正常') }}
        </span>
      </span>
    </a-table>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil';
export default {
  name: 'skStudentTable',
  data() {
    return {
      url: {
        list: "/management/skStudentCheck/getStudentCheckDetailStatistical"
      },
      loading:false,
      dataForm: {},
      dataDate: '',
      columns:[],
      dataSource:[],
      dataColumns:[],
    }
  },
  props:["detailName", "dateType", "rateType"],
  components: {},

  filters: {},

  computed: {
    tebleXScroll:{
      get(){
        return this.$store.state.skCommon.columnsWidth
      },
      set(val){
        this.$store.dispatch("setcolumnsWidth",val)
      }
    }
  },
  
  created() {
    this.dataDate = this.$skCommon.getDate(1);
  },
  
  activated() {},
  
  mounted() {},
  
  methods: {
    // 获取学生具体信息
    getStudentData(dataForm){     
      this.dataForm = dataForm;
      console.log('dataForm', dataForm)
      this.setColumns();

      const semesterId = dataForm.semesterId ? dataForm.semesterId : dataForm.semesterHistoryId
      const params = {
        statisticalScope: 'student',
        timeScope: dataForm.dateType == 'sem' || dataForm.dateType == 'historySem' ? semesterId : dataForm.dateType,
        classId: dataForm.classId ? dataForm.classId : undefined
      }

      this.loading = true;
      getAction(this.url.list,params).then((res)=>{
        if(res.success){
          this.dataSource = [];
          if(res.result.length > 0) {
            res.result.forEach(item => {
              let stuItem = {
                classId: item.classId,
                className: item.className,
                classType: item.classType,
                studentId: item.studentId,
                studentName: item.studentName
              }
              
              let totalShouldArrive = (this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem') ? 0 : item.schoolDays;
              let totalActualArrival = 0;
              let totalLate = 0;
              for(let rowIndex = 0; rowIndex < this.dataColumns.length; rowIndex++){
                const rowString = this.dataColumns[rowIndex].toString()
                if(this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem') {
                  const data = item.details.find(item => item.checkDate == rowString);
                  if(data){
                    totalShouldArrive += data.shouldDays
                    totalActualArrival += data.practicalDays
                    totalLate += data.late;
                    stuItem['shouldDays' + rowString] = data.shouldDays
                    stuItem['actualDays' + rowString] = data.practicalDays
                    stuItem['rate' + rowString] = (data.rate * 100).toFixed(2)
                    stuItem['lateRate' + rowString] = (data.lateRate * 100).toFixed(2)
                  }else{
                    stuItem['shouldDays' + rowString] = 0
                    stuItem['actualDays' + rowString] = 0
                    stuItem['rate' + rowString] = 0
                    stuItem['lateRate' + rowString] = 0
                  }
                }else{
                  const data = item.details.filter(item => { return item.checkDate }).find(item => item.checkDate.substring(5) == rowString);
                  if(data){
                    totalActualArrival += 1
                    totalLate += data.late;
                    stuItem['checkTime' + rowString] = data.checkTime;
                    stuItem['late' + rowString] = data.late;
                  }else{
                    stuItem['checkTime' + rowString] = '-';
                    stuItem['late' + rowString] = '-';
                  }
                }
              }
              stuItem['totalRate'] = totalShouldArrive == 0 ? '-' : ( ( (totalActualArrival / totalShouldArrive) > 1 ? 1 : (totalActualArrival / totalShouldArrive) ) * 100).toFixed(2);
              stuItem['totalLateRate'] = totalShouldArrive == 0 ? '-' : ( ( (totalLate / totalShouldArrive) > 1 ? 1 : (totalLate / totalShouldArrive) ) * 100).toFixed(2);
              this.dataSource.push(stuItem);
            })
          }
          this.loading = false;
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
        this.loading = false;
      })
    },
    unique(newarr, key) {
      const res = new Map();
      return newarr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1));
    },
    // 表头
    setColumns(){
      this.columns = [
        {
          title: '班级',
          align: 'center',
          dataIndex: 'className',
          fixed: 'left',
          width: 140,
        },
        {
          title: '学生',
          align: 'center',
          dataIndex: 'studentName',
          fixed: 'left',
          width: 100,
        }
      ];

      let totalTitle = '本月'
      if (this.dataForm.dateType == 'week') {
        totalTitle = '本周'
        this.dataColumns = this.$skCommon.getCurrentWeekDays();
      } else if (this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem') {
        totalTitle = '学期'
        const semester = this.dataForm.semester;
        this.dataColumns = this.$skCommon.getMonths(semester.startDate, semester.endDate, 'yyyy-MM');
      } else {
        totalTitle = '本月'
        this.dataColumns = this.$skCommon.getCurrentMonthDays('MM-dd');
      }
      if (this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem'){
        for(let rowIndex = 0; rowIndex < this.dataColumns.length; rowIndex++){
          const rowString = this.dataColumns[rowIndex].toString()
          this.columns.push(
            {
              title: rowString,
              align: 'center',
              children: [
                {
                  title: '应出勤(天)',
                  align: 'center',
                  dataIndex: 'shouldDays' + rowString,
                  key: 'shouldDays' + rowString,
                  width: this.dataColumns.length > 4 ? 100 : 'unset',
                  customRender: function(text) {
                    return text || '-'
                  }
                },
                {
                  title: '出勤(天)',
                  align: 'center',
                  dataIndex: 'actualDays' + rowString,
                  key: 'actualDays' + rowString,
                  width: this.dataColumns.length > 4 ? 100 : 'unset',
                  customRender: function(text) {
                    return text || '-'
                  }
                },
                {
                  title: '出勤率(%)',
                  align: 'center',
                  dataIndex: 'rate' + rowString,
                  key: 'rate' + rowString,
                  width: this.dataColumns.length > 4 ? 100 : 'unset',
                  customRender: function(text) {
                    return text || '-'
                  }
                },
              ],
            },
          )
        }
        this.columns.push(
          {
            title: totalTitle,
            align: 'center',
            children: [
              {
                title: '出勤率(%)',
                align: 'center',
                dataIndex: 'totalRate',
                key: 'totalRate',
                // width: this.dataColumns.length > 4 ? 120 : null,
                customRender: function(text) {
                  return text || '-'
                }
              },
            ]
          }
        )
      }else{
        let title = '入园时间'
        for(let rowIndex = 0; rowIndex < this.dataColumns.length; rowIndex++){
          const rowString = this.dataColumns[rowIndex].toString()
          this.columns.push(
            {
              title: rowString,
              align: 'center',
              children: [
                {
                  title: title,
                  align: 'center',
                  dataIndex: 'checkTime' + rowString,
                  key: 'checkTime' + rowString,
                  width: 100,
                  scopedSlots: { customRender: 'checkTime' },
                },
                {
                  title: '状态',
                  align: 'center',
                  dataIndex: 'late' + rowString,
                  key: 'late' + rowString,
                  scopedSlots: { customRender: 'status' },
                },
              ],
            },
          )
        }
        this.columns.push(
          {
            title: totalTitle,
            align: 'center',
            children: [
              {
                title: '出勤率(%)',
                align: 'center',
                dataIndex: 'totalRate',
                key: 'totalRate',
                width: 120,
                customRender: function(text) {
                  return text || '-'
                }
              },
              {
                title: '迟到率(%)',
                align: 'center',
                dataIndex: 'totalLateRate',
                key: 'totalLateRate',
                width: 120,
                customRender: function(text) {
                  return text || '-'
                }
              },
            ]
          }
        )
      }
      this.tebleXScroll = this.columns.length
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
// /deep/ .ant-table-body {
//     overflow-y: auto !important;
//     overflow: overlay !important; //谷歌
//   }
</style>
